<template>
  <div class="login-container">
    <div class="title-container">
        <h3 class="title">{{ globalObject.systemName }}</h3>
      </div>
    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left" size="default">
      <el-form-item prop="userAccount">
        <el-input prefix-icon="UserFilled" v-model="loginForm.userAccount" placeholder="请输入账号" name="username" type="text" tabindex="1" auto-complete="on" clearable/>
      </el-form-item>
      <el-form-item prop="userPwd">
        <el-input :key="passwordType" prefix-icon="Lock"  v-model="loginForm.userPwd" :type="passwordType" placeholder="请输入密码" name="password" tabindex="2" auto-complete="on" @keyup.enter="handleLogin" show-password clearable/>
      </el-form-item>
      <el-form-item prop="rememberPwd">
        <el-checkbox v-model="loginForm.rememberPwd" name="type">
          <span style="color: black;">记住账号密码</span>
        </el-checkbox>
      </el-form-item>
      <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;font-size: 18px;" @click="handleLogin">登 录</el-button>
    </el-form>
  </div>
</template>

<script>
import { validUsername } from '@/utils/validate'
import { setToken, rememberPwd, getRememberPwdInfo, setUserInfo } from "@/utils/localStorage";
import { login } from '@/api/system/user'
import store from '@/store'
export default {
  name: 'Login',
  data() {
     const validatePassword = (rule, value, callback) => {
      if(value) {
        if (value.length < 6) {
          callback(new Error('密码不能少于6个字符'))
        } else {
          callback()
        }
      } else {
         callback(new Error('密码不能为空'))
      }
    }
    return {
      loginForm: {
        userAccount: '',
        userPwd: '',
        rememberPwd: true
      },
      validatePassword:validatePassword,
      loginRules: {
        userAccount: [{ required: true, message: '请输入账号', trigger: ['blur', 'change']}],
        userPwd: [{ required: true, message: '请输入密码', trigger: ['blur', 'change']}]
      },
      loading: false,
      passwordType: 'password',
      redirect: undefined
    }
  },
  mounted() {
    // 记住密码之后,到登录页的时候,自动填充账号密码
    let rememberPwdInfo = getRememberPwdInfo();
    if (rememberPwdInfo && rememberPwdInfo.userAccount && rememberPwdInfo.userPwd) {
      this.loginForm.userAccount = rememberPwdInfo.userAccount
      this.loginForm.userPwd = rememberPwdInfo.userPwd
    }
  },
  methods: {
    // 登录
    handleLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.loading = true
          login(this.loginForm)
          .then(res=>{
            if (res.code==1) {
              setToken(res.data.token)
              setUserInfo(res.data)
              if (this.loginForm.rememberPwd == true) {
                rememberPwd(this.loginForm.userAccount,this.loginForm.userPwd)
              }
              this.$router.push({ path: this.globalObject.homePath })
              // 先清空tab
              store.commit("clearTab", {});
              // 再重新设置
              store.commit("addTabList", { path: this.globalObject.homePath, name: '首页' });
              store.commit('setMenuList',res.data.rights)
              store.commit('setUserInfo',res.data)
            }
            this.loading = false
          }).catch(error=>{
            this.loading = false
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style scoped>
.login-container {
  background-image: url(/public/bg.avif);
  background-repeat: repeat;
  background-size: cover;
  min-height: 100%;
  width: 100%;
  background-color: #2d3a4b;
  overflow: hidden;
  height: 100vh;
}
.login-form {
    position: relative;
    width: 375px;
    max-width: 100%;
    margin: 0 auto;
    overflow: hidden;
    background-color: #ffffffc9;
    padding: 40px 50px;
    border-radius: 4px;
  }

  .tips {
    font-size: 14px;
    color: #fff;
    margin-bottom: 10px;
  }

  .svg-container {
    padding: 6px 5px 6px 15px;
    color: #889aa4;
    vertical-align: middle;
    width: 30px;
    display: inline-block;
  }

  .title-container {
    position: relative;
    margin-top: 12%;
  }
  .title {
    font-size: 26px;
    color: black;
    margin: 0px auto 40px auto;
    text-align: center;
    font-weight: 400;
  }

  .show-pwd {
    position: absolute;
    right: 10px;
    top: 7px;
    font-size: 16px;
    color: #889aa4;
    cursor: pointer;
    user-select: none;
  }
</style>
